<template>
  <div class="rightbottom">
    <!-- <div v-for="(imgs,id) in imgobj" :key="id" class="r1">
            <router-link to="/Index/Picture"><img :src="imgs.img"></router-link>
            <p>{{imgs.value}}</p>
        </div> -->  
    <div class="d1">
      <img src="../../../public/imgs/f6.jpg" alt="" />
      <p>丁程鑫</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f7.jpg" alt="" />
      <p>学习美图</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f12.jpg" alt="" />
      <p>猫咪头像</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f8.jpg" alt="" />
      <p>昔有琉璃瓦</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f11.png" alt="" />
      <p>必爱诺</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f5.jpg" alt="" />
      <p>表情包</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f9.jpg" alt="" />
      <p>动漫壁纸</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f7.jpg" alt="" />
      <p>电脑分区壁纸</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f8.jpg" alt="" />
      <p>fufu表情包</p>
    </div>
    <div class="d1">
      <img src="../../../public/imgs/f4.jpg" alt="" />
      <p>卡通动图</p>
    </div>
    
  </div>
</template>
// <script>
// import axios from "axios";
// export default {
//   name: "NavrightBottom",
//   // props:["class"],
//   data() {
//     return {
//       imgobj: [],
//     };
//   },

//   created() {
//     axios({
//       url: "http://localhost:3000/imgobj",
//       method: "get",
//       params: {
//         // src:this.src,
//         // text:this.text
//       },
//     })
//       .then((res) => {
//         this.imgobj = res.data;
//         // console.log(this.imgobj)
//       })
//       .catch(function (error) {
//         console.log(error);
//       });
//   },
// };
</script>
<style scoped>
.rightbottom {
  float: left;
  margin-top: 0.1rem;
  width: 2.47rem;
  height: 7rem;
  overflow-y: scroll;
}
.rightbottom .d1 {
  position: relative;
  float: left;
}
/* .rightbottom .r1 {
  width: 1.37rem;
  height: 1.33rem;
  float: left;

  font-size: 0.16rem;
  position: relative;
  float: left;
} */
.rightbottom .d1 img {
  width: 100%;
  height: 100%;
}
.rightbottom p {
  position: absolute;
  left: 0.04rem;
  bottom: 0.06rem;
  z-index: 2;
  color: white;
  font-size: 0.14rem;
}
.rightbottom div {
  margin-bottom: 0.1rem;
}
.rightbottom div:nth-child(1),
.rightbottom div:nth-child(9) {
  /* .rightbottom div:nth-child(17) { */
  width: 1.34rem;
  height: 1.33rem;
  margin-right: 0.08rem;
  background-size: 1.34rem 1.33rem;
}
.rightbottom div:nth-child(2),
.rightbottom div:nth-child(10) {
  /* .rightbottom div:nth-child(18) { */
  width: 0.99rem;
  height: 1.35rem;
  background-size: 0.96rem 1.33rem;
}
.rightbottom div:nth-child(2)::after {
  content: "活动";
  width: 0.4rem;
  height: 0.2rem;
  line-height: 0.19rem;
  color: white;
  font-size: 0.1rem;
  background-color: #ff5959;
  border-radius: 0 0 0.04rem 0;
  position: absolute;
  text-indent: 0.1rem;
  top: 0;
  left: 0;
}
.rightbottom div:nth-child(3) {
  /* .rightbottom div:nth-child(11){ */
  /* .rightbottom div:nth-child(19) { */
  width: 1.04rem;
  height: 0.98rem;
  margin-right: 0.08rem;
  background-size: 1.04rem 0.98rem;
  position: relative;
}
.rightbottom div:nth-child(3)::after {
  content: "hot";
  width: 0.32rem;
  height: 0.16rem;
  line-height: 0.16rem;
  color: white;
  font-size: 0.12rem;
  background-color: #ff5959;
  border-radius: 0 0 0.04rem 0;
  position: absolute;
  text-indent: 0.06rem;
  top: 0;
  left: 0;
}
.rightbottom div:nth-child(4) {
  /* .rightbottom div:nth-child(12){ */
  /* .rightbottom div:nth-child(20) { */
  width: 1.3rem;
  height: 0.98rem;
  background-size: 1.3rem 0.98rem;
}
.rightbottom div:nth-child(5) {
  /* .rightbottom div:nth-child(13) { */
  width: 1.4rem;
  height: 1.07rem;
  margin-right: 0.08rem;
  background-size: 1.4rem 1.07rem;
}
.rightbottom div:nth-child(6) {
  /* .rightbottom div:nth-child(14) { */
  width: 0.95rem;
  height: 1.07rem;
  background-size: 0.9rem 1.07rem;
}
.rightbottom div:nth-child(7) {
  /* .rightbottom div:nth-child(15) { */
  width: 1.38rem;
  height: 1.32rem;
  margin-right: 0.08rem;
  background-size: 1.38rem 1.32rem;
}
.rightbottom div:nth-child(8) {
  /* .rightbottom div:nth-child(16) { */
  width: 0.98rem;
  height: 1.32rem;
  background-size: 0.98rem 1.32rem;
}
.d1 {
  background-color: red;
}
.d1 img {
  width: 100%;
  height: 100%;
}
</style>